<template>
	<view>
		<swiper class="swiper"  :vertical='true' :duration="duration" @change="changeVideo">

			<swiper-item v-for="(item,index) in videoList" :key="index">
				<video class="myvideo" :src="item"  objectFit="fill" 
				:id="index"  :show-center-play-btn='false' :loop="true"
				@click.stop="clickVideo(index)" show-loading :controls="false">
					<view class="mycover">
						<u-avatar
							src="https://thirdwx.qlogo.cn/mmopen/vi_32/oibqGrCYmOibCU1DpicD1gQCd9RvKD1SlibKVPRELlHkEqDicWN7CAJQdB9tmzS95U9hLVL78mRFk1MawaHp9uWiaib3g/132">
						</u-avatar>
						<u-icon @click='guanzhu' style='display: block; position: relative;left: 26rpx;top: -35rpx;'
							size="50" color="#fa3534" name="plus-circle-fill"></u-icon>
						<u-icon style='display: block; position: relative;left: 12rpx;top: 10rpx;' size="80"
							color="#FCFCFC" name="heart-fill"></u-icon>
						<u-icon style='display: block; position: relative;left: 12rpx;top: 50rpx;' size="80"
							color="#FCFCFC" name="chat-fill"></u-icon>
						<u-icon style='display: block; position: relative;left: 12rpx;top: 90rpx;' size="80"
							color="#FCFCFC" name="star-fill"></u-icon>
						<u-icon style='display: block; position: relative;left: 12rpx;top: 130rpx;' size="80"
							color="#FCFCFC" name="zhuanfa"></u-icon>
					</view>
				</video>




			</swiper-item>


		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				isPlay:true,
				videoContext: undefined ,//全局定义视频API变量
				videoList: [
					"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-317eacc4-eb48-432c-961c-89d775f4f36e/8b9e0e8c-6fc0-4728-a259-e8fa841d9925.mp4",
					'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-317eacc4-eb48-432c-961c-89d775f4f36e/a43a2720-dbec-4762-b60f-045f62154777.mp4',
					'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-317eacc4-eb48-432c-961c-89d775f4f36e/800178bf-f2ce-42c6-92be-4da988a62015.mp4'
				]
			}
		},
		
		onShow() {
			this.changeVideo(1);//把这个放到初始化页面的函数内，即可进入页面自动播放，不放就不会自动播放
			
		},
		methods: {

			guanzhu() {
				console.log('hhh')
			},
			
			clickVideo(){
				if (this.isPlay) {
					this.videoContext.pause()
					// this.videoContext.seek(0)
					this.isPlay = false
				} else{
					this.videoContext.play()
					this.isPlay = true
				}
				
			},
			
			
		async changeVideo(e){
				if(e.detail != undefined){
					this.current = e.detail.current
					this.videoContext.pause()
					this.videoContext.seek(0)
					this.$off(this.videoContext);
				}
				this.videoContext = await uni.createVideoContext(this.current.toString())
				this.videoContext.play()
				this.isPlay = true
			}
			
			
			
			
			
			

		},


	}
</script>

<style>
	.swiper {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.myvideo {
		width: 100%;
		height: 100%;
	}

	.mycover {
		height: 100%;
		right: 40rpx;
		top: 40%;
		position: absolute;
		z-index: 999999;
	}
</style>
